<template>
    <div class="header">

        <div class="box">
            <!--左侧-->
            <div class="left" @click="goHome">
                <!--图片-->
                <img src="../../assets/header/logo.jpg">
                <img src="../../assets/header/wyxjava.jpg">
            </div>

            <!--中间-->
            <div class="center-box">
                <div :class="{'home':true,'now':choiceId == 'home'}"
                     ref="home"
                     @mouseenter="hover(`home`)"
                     @mouseleave="over(`home`)"
                     @click="gotoRouter(`home`)">
                    首页
                </div>
                <div :class="{'course':true,'now':choiceId == 'course'}"
                     ref="course"
                     @mouseenter="hover(`course`)"
                     @mouseleave="over(`course`)"
                     @click="gotoRouter(`course`)">
                    课程
                </div>
                <div :class="{'nav':true,'now':choiceId == 'nav'}"
                     ref="nav"
                     @mouseenter="hover(`nav`)"
                     @mouseleave="over(`nav`)"
                     @click="gotoRouter(`nav`)">
                    导航
                </div>
            </div>

            <!--右侧-->
            <div class="right-box">
                <!--搜索框-->
                <div class="search-box">
                    <Search></Search>
                </div>
                <!--登录-->
                <div class="login"
                     v-if="!isLogin"
                     @click="login">
                    登录
                </div>
                <!--个人中心-->
                <div class="userCenter"
                     v-if="isLogin">

                    <div class="tip">
                        <!--徽标数-->
                        <Badge :count="count"
                               class="badge"
                               :offset="[24,4]">
                            <Icon type="ios-notifications-outline"
                                  size="26"
                                  style="margin-top: 24px"></Icon>
                        </Badge>
                    </div>

                    <Dropdown @on-click="selectMenu" palcement="bottom-end">
                        <!--头像-->
                        <Avatar size="40"
                                shape="square"
                                icon="ios-person"
                                :src="userInfo.headPortrait"
                                style="border: 1px solid #D5D5D5;margin-right: -15px"/>

                        <Dropdown-menu slot="list">
                            <DropdownItem name="user">
                                <Icon type="md-person" size="18"/>
                                个人中心
                            </DropdownItem>
                            <DropdownItem name="logout" divided>
                                <Icon type="md-log-out" size="18"/>
                                退出登录
                            </DropdownItem>
                        </Dropdown-menu>
                    </Dropdown>

                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import Search from "@/components/header/Search"
    import {delCookie} from "@/tools/cookie";

    export default {
        name: "",
        components: {
            Search
        },
        data() {
            return {
                choiceId: "home",
                count: 0
            }
        },
        computed: {
            isLogin() {
                return this.Store.getters.getIsLogin;
            },
            userInfo() {
                return this.Store.getters.getUserInfo;
            },
        },
        methods: {
            //去到首页
            goHome: function () {
                this.choiceId = 'home'
                this.$router.push("/");
            },
            //鼠标移进去
            hover: function (tab) {
                let div;
                switch (tab) {
                    case "home":
                        div = this.$refs.home;
                        break;
                    case "course":
                        div = this.$refs.course;
                        break;
                    case "nav":
                        div = this.$refs.nav;
                        break;
                }
                div.style.backgroundColor = "#33AFF3"
                div.style.borderRadius = "2px"
                div.style.color = "#FFFFFF"
                div.style.fontSize = "20px"
                div.style.fontWeight = "bolder"
            },
            //鼠标移出去
            over: function (tab) {
                let div;
                switch (tab) {
                    case "home":
                        div = this.$refs.home;
                        break;
                    case "course":
                        div = this.$refs.course;
                        break;
                    case "nav":
                        div = this.$refs.nav;
                        break;
                }
                div.style.backgroundColor = "#FFFFFF"
                div.style.color = "#000000"
                div.style.fontSize = "18px"
                div.style.fontWeight = "lighter"
            },
            //去到路由
            gotoRouter: function (tab) {
                switch (tab) {
                    case "home":
                        this.choiceId = 'home'
                        this.$router.push("/")
                        break;
                    case "course":
                        this.choiceId = 'course'
                        this.$router.push("/subject")
                        break;
                    case "nav":
                        this.choiceId = 'nav'
                        this.$router.push("/navigation")
                        break;
                }
            },
            //选择菜单
            selectMenu: function (name) {
                if (name == "user") {
                    this.$router.push("userCenter")
                }
                if (name == "logout") {
                    //删除 sessionStorage
                    window.sessionStorage.clear();
                    //删除 cookie
                    delCookie("isLogin");
                    delCookie("token");
                    delCookie("userInfo");

                    // this.Bus.$emit("my-event-header-load", true);
                    //刷新页面到首页
                    window.location.replace("/")
                }
            },
            //登录
            login: function () {
                this.$router.push("login")
            }
        },
        mounted() {
        }
    }
</script>

<style scoped>
    .header {
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
    }

    /*头部盒子*/
    .header .box {
        width: 1200px;
        height: 70px;
        margin: 0 auto;
    }

    /*左侧 logo*/
    .header .box .left {
        cursor: pointer;
        float: left;
        height: 100%;
    }

    /*中间 首页课程导航*/
    .header .box .center-box {
        float: left;
        height: 100%;
        margin-left: 150px;
    }

    /*首页 课程 导航*/
    .header .box .center-box .home,
    .header .box .center-box .course,
    .header .box .center-box .nav {
        cursor: pointer;
        /*border:1px solid black;*/
        float: left;
        width: 80px;
        font-size: 18px;
        font-weight: lighter;
        line-height: 70px;
        text-align: center;
    }

    .header .box .center-box .course,
    .header .box .center-box .nav {
        margin-left: 20px;
    }

    /*当前在哪个tab now*/
    .header .box .center-box .now {
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #000000 !important;
    }

    /*右侧 搜索 登录*/
    .header .box .right-box {
        float: right;
        height: 100%;
    }

    /*搜索框*/
    .header .box .right-box .search-box {
        float: left;
        margin: 14px 20px 0px 0px;
    }

    /*登录*/
    .header .box .right-box .login {
        cursor: pointer;
        float: right;
        width: 100px;
        font-size: 18px;
        font-weight: lighter;
        line-height: 70px;
        text-align: center;
    }

    /*用户中心*/
    .header .box .right-box .userCenter {
        cursor: pointer;
        float: right;
        width: 100px;
        font-size: 16px;
        font-weight: lighter;
        line-height: 70px;
        text-align: center;
    }

    /*用户中心*/
    .header .box .right-box .userCenter .tip {
        cursor: pointer;
        float: left;
        margin-left: 10px;
    }

    /*登录*/
    .header .box .right-box .login:hover {
        cursor: pointer;
        float: right;
        width: 100px;
        color: #F20A0A;
        font-size: 18px;
        font-weight: bolder;
        line-height: 70px;
        text-align: center;
    }
</style>